<template>
    <div class="comheader">
        <div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item  v-for="(item,index) in breadList" :key="index" :to="{path:item.path}">{{item.title}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div>
          <ul class="right">
            <li>
              <el-dropdown>
                <span class="el-dropdown-link">
                  欢迎，{{accountInfo.account}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>修改密码</el-dropdown-item>
                  <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li>
              <el-image
                 :src="accountInfo.imgUrl"
              ></el-image>
            </li>
          </ul>
        </div>
    </div>
</template>

<script>
import {api_personal} from "../../api/users";
    export default {
        data(){
          return {
            breadList:[],
            accountInfo:{}
          }
        },
        mounted(){
          this.getPersonal();
        this.$bus.$on("sendHead",this.setHead)
        },
        methods:{
          setHead(url){
            this.accountInfo.imgUrl=url;
            //将更改的数据重新出入到本地
            this.$session.set("accountInfo",this.accountInfo)
           
          },
         async getPersonal(){
          let rst= await api_personal();
          this.accountInfo=rst.accountInfo;
          // 将个人信息存储到本地
          this.$local.set("accountInfo",rst.accountInfo)
          console.log(rst);
          }
        },
        
        // 侦听器
        watch:{
          $route:{
            deep:true,
            immediate: true, 
            handler(){
              let arr=[];
              this.$route.matched.forEach((item)=>{
                if(item.meta.title && item.meta.title!='首页'){
                 arr.push({path:item.path,title:item.meta.title})
                 }
              })
              this.breadList=arr;
              console.log(arr);
              console.log(this.$route)
            }
          }
        }
    }
</script>

<style lang="less" scoped>
.comheader {
  display: flex;
  justify-content: space-between;
  align-items: center;

}
  .right {
    display: flex;
    li:nth-child(1) {
      display: flex;
      align-items: center;
    }
    .el-image {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
</style>